{extend name="public/container"}
{block name="content"}
<div class="row" id="myApp">
    <div style="margin-right: 20px;">
        <h3>分销图</h3>
    </div>
    <div>
        <el-upload class="avatar-uploader" action="/admin/distribution.setting/view_upload.html" :show-file-list="false" :on-preview="handlePictureCardPreview" :on-remove="handleRemove" :on-exceed="handleExceed" :on-success="handleUploadSuccess">
            <img v-if="distributionShareImage" :src="distributionShareImage" class="mavatar">
            <i v-else class="el-icon-plus mavatar-uploader-icon"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="distributionShareImage" alt="">
        </el-dialog>
        <br>
        <el-button type="primary" :loading="actionLoading" @click="updateData">确认</el-button>
    </div>
</div>
{/block}
{block name="script"}
<script>
    var my = new Vue({
        el: "#myApp",
        data: {
            dialogVisible: false,
            actionLoading: false,
            distributionShareImage: ''
        },
        methods: {
            getData() {
                axios.get(Url({
                        a: 'getData'
                    }))
                    .then(res => {
                        var data = res.data.data
                        console.log(data)
                        data.forEach((item, index) => {
                            this[item.key] = item.value
                        })
                        console.log(this.data);
                    })
            },
            updateData() {
                axios.post(Url({
                    a: "updateData"
                }), {
                    distributionShareImage: this.distributionShareImage
                }).then((res) => {
                    this.$message({
                        message: res.data.msg,
                        type: res.data.code === 200 ? 'success' : 'error',
                    })
                }).catch(_ => {
                    this.$message({
                        message: '更新失败',
                        type: 'error'
                    })
                })
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePictureCardPreview(file) {
                this.distributionShareImage = file.url;
                this.dialogVisible = true;
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length} 个文件`);
            },
            handleUploadSuccess(res, file) {
                this.distributionShareImage = res.data.url
            },
        },
        mounted() {
            this.getData()
        }
    })
</script>
{/block}
{block name="head"}
<style>
    #myApp {
        display: flex;
        margin: 20px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .mavatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 225px;
        height: 400px;
        line-height: 400px;
        text-align: center;
    }

    .mavatar {
        width: 225px;
        height: 400px;
        display: block;
    }
</style>
{/block}